// 用户详情页脚本
new Vue({
  el: '#app',
  data() {
    // 确认密码验证规则
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.securityForm.newPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };
    
    return {
      // 编辑模式
      isEditing: false,
      
      // 当前激活的标签页
      activeTab: 'profile',
      
      // 用户信息
      userInfo: {
        uuid: 'user123',
        account: 'zhangsan',
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '13800138000',
        avatar: '',
        bio: '我是一名前端开发工程师，熟悉Vue.js、Element UI等技术栈。',
        createTime: '2023-01-01 10:00:00',
        updateTime: '2023-03-15 15:30:00'
      },
      
      // 用户统计信息
      statistics: {
        cardCount: 15,
        completedCount: 8,
        collectCount: 5
      },
      
      // 安全设置表单
      securityForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      
      // 安全设置验证规则
      securityRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      },
      
      // 安全设置
      securitySettings: {
        loginProtection: true,
        loginNotification: false
      },
      
      // 通知设置
      notificationSettings: {
        system: true,
        task: true,
        comment: true,
        methods: ['app', 'email']
      }
    };
  },
  created() {
    // 获取用户信息
    this.fetchUserInfo();
  },
  methods: {
    // 获取用户信息
    fetchUserInfo() {
      // 模拟从后端获取数据
      // 实际应用中应该调用后端API
      console.log('获取用户信息:', this.userInfo.uuid);
    },
    
    // 返回上一页
    goBack() {
      // 如果处于编辑状态，提示用户
      if (this.isEditing) {
        this.$confirm('您有未保存的更改，确定要离开吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 实际应用中使用路由或history返回
          console.log('返回上一页');
        }).catch(() => {
          // 取消离开
        });
      } else {
        // 实际应用中使用路由或history返回
        console.log('返回上一页');
      }
    },
    
    // 切换编辑模式
    toggleEdit() {
      // 如果当前是编辑模式，询问是否放弃更改
      if (this.isEditing) {
        this.$confirm('是否放弃更改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isEditing = false;
          // 重新获取用户信息
          this.fetchUserInfo();
        }).catch(() => {
          // 继续编辑
        });
      } else {
        this.isEditing = true;
      }
    },
    
    // 保存用户信息
    saveUserInfo() {
      // 模拟保存用户信息
      // 实际应用中应该调用后端API
      console.log('保存用户信息:', this.userInfo);
      
      // 更新修改时间
      this.userInfo.updateTime = new Date().toLocaleString('zh-CN');
      
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      
      // 关闭编辑模式
      this.isEditing = false;
    },
    
    // 上传头像前的校验
    beforeAvatarUpload(file) {
      const isImage = file.type.indexOf('image/') === 0;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('上传头像图片只能是图片格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }
      
      return true;
    },
    
    // 处理头像上传
    handleAvatarUpload(options) {
      const file = options.file;
      
      // 模拟上传头像
      // 实际应用中应该调用后端API上传头像
      const reader = new FileReader();
      reader.onload = (e) => {
        this.userInfo.avatar = e.target.result;
        
        this.$message({
          type: 'success',
          message: '头像上传成功!'
        });
      };
      
      reader.readAsDataURL(file);
    },
    
    // 修改密码
    changePassword() {
      this.$refs.securityForm.validate((valid) => {
        if (valid) {
          // 模拟修改密码
          // 实际应用中应该调用后端API
          console.log('修改密码:', this.securityForm);
          
          this.$message({
            type: 'success',
            message: '密码修改成功!'
          });
          
          // 清空表单
          this.securityForm = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          };
        } else {
          return false;
        }
      });
    }
  }
}); 